import React from "react";
import styles from "./index.module.less";
import { Button, Form, Input } from "antd";
import { IDataType, ILoginFormProps } from "./type";

const LoginForm: React.FC<ILoginFormProps> = ({
  register,
  onFinish,
  onFinishFailed,
  setRegister,
  form,
}) => {
  return (
    <div className={styles["form-ctn"]}>
      <Form
        size="large"
        form={form}
        wrapperCol={{ span: 24 }}
        style={{ maxWidth: 600 }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item<IDataType>
          label="账号"
          name="userAccount"
          rules={[{ required: true, message: "请输入账号" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item<IDataType>
          label="密码"
          name="userPassword"
          rules={[{ required: true, message: "请输入密码" }]}
        >
          <Input.Password />
        </Form.Item>
        {register ? (
          <div onClick={() => setRegister(false)} className={styles["txt"]}>
            去登录我的账号吧!
          </div>
        ) : (
          <div onClick={() => setRegister(true)} className={styles["txt"]}>
            去注册我的账号!
          </div>
        )}
        <Form.Item labelCol={{ span: 12 }}>
          <Button
            type="primary"
            htmlType="submit"
            style={{ width: 260, height: 40, marginLeft: 40 }}
          >
            {register ? "注册" : "登录"}
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};
export default LoginForm;
